<template>
  <!-- 注销账号申请页 -->
  <view class="pages">
    <view class="cancel_info_box">
      <image src="@/static/my/cancel-account-logo.png" mode="aspectFit" />
      <view style="font-size: 30rpx; color: #202020">注销咪婴伴侣「医生端」APP服务</view>
      <view style="font-size: 28rpx; color: #5c5c5c; margin-top: 30rpx"
        >注销前请认真阅读以下重要提醒。账号注销后，您将无法再使用该账号，包括但不限于:</view
      >
      <view class="cancel_info_centent">
        <view class="centent_item">1.无法登录、使用咪婴伴侣账号，并移除该账号下所有登录方式;</view>
        <view class="centent_item">2.账号头像重置为默认头像、昵称重置为“用户已注销”;</view>
        <view class="centent_item">3.移除该账号下的实名认证信息;</view>
        <view class="centent_item">4.该账号下的个人资料和历史信息都将无法找回;</view>
        <view class="centent_item">5.取消所有认证身份(如创作者、企业号)且无法恢复;</view>
        <view class="centent_item">6.账号中所有的资产及权益被清除;</view>
      </view>
      <view class="popup_check">
        <!-- <up-checkbox-group shape="circle" @change="isChecked = !isChecked">
          <label>
            <up-checkbox
              :checked="false"
              color="#4a4a4a"
              activeColor="#00C1B9"
              style="transform: scale(0.8)"
            />
          </label>
        </up-checkbox-group> -->
        <view class="round_c" @click="isChecked = !isChecked">
          <view class="round" :class="{ round_active: isChecked }">
            <u-icon name="checkmark" size="10" :bold="true" v-if="isChecked" color="#FFF"></u-icon>
          </view>
        </view>
        <view class="popup_check_text">
          <text>我已阅读并同意</text>
          <text
            class="popup_check_text_c"
            @click="navigateTo(`/pages-users/common-agreement/index?type=3`)"
            >《账号注销协议》</text
          >
        </view>
      </view>
      <view class="verify_btn" @click="submit" v-if="current === 0">确认注销</view>
      <view class="surrender" @click="navigateBack">放弃注销</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { showToast, navigateTo, navigateBack, switchTab } from '@/utils'
import { cancelAccount } from '@/api/patients/index'
import { useMemberStore } from '@/stores'

const userStore = useMemberStore()
const isChecked = ref(false)
const current = ref(0)
const screenHeightValue = ref(0)
uni.getSystemInfo({
  success: (e) => {
    let value = e?.screenHeight * 2
    screenHeightValue.value = value - e?.statusBarHeight * 2
    console.log(screenHeightValue.value - 200 + 'rpx')
  },
})
/**
 * 提交注销申请
 */
const submit = () => {
  if (!isChecked.value) {
    showToast('请先阅读并同意《账号注销协议》')
    return
  } else {
    uni.showModal({
      // 再次询问是否注销
      title: '温馨提示',
      content: '注销后，您的账号将无法再使用，是否继续注销？',
      success: async (e) => {
        if (e.confirm) {
          const res = await cancelAccount()
          if (res.message === '注销成功~' || res.message === '医生不存在') {
            userStore.clearUserInfo()
            userStore.clearToken()
            switchTab('/pages/my/index')
          }
          showToast(res.message)
        }
      },
    })
  }
}
</script>
<style>
page {
  background-color: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.pages {
  width: 750rpx;
  height:100vh;
  font-family: PingFangSC, PingFang SC;
  display:flex;
  flex-direction: column;
  align-items: center;
  .leng {
    width: 100%;
    height: 20rpx;
    background-color: #f6f6f6;
  }
  .cancel_info_box {
    flex:1;
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 50rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:20rpx;
    image {
      width: 100rpx;
      height: 100rpx;
      margin: 20rpx 0;
    }
    .cancel_info_centent {
      font-size: 26rpx;
      color: #5c5c5c;
      margin-top: 30rpx;
      .centent_item {
        margin-bottom: 40rpx;
        line-height: 40rpx;
      }
    }
    .popup_check {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #aaaaaa;
      margin-top: 30rpx;
      .round_c {
        padding-top: 6rpx;
        width: 34rpx;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;

        .round_active {
          border: none !important;
          background-color: #00c1b9 !important;
        }

        .round {
          width: 24rpx;
          height: 24rpx;
          border-radius: 50%;
          opacity: 1;
          border: 1rpx solid #999999;
          display: flex;
          align-items: center;
          justify-content: center;
          // margin-right: 8rpx;
        }
      }

      .popup_check_text_c {
        color: #00c1b9;
      }
    }
    .verify_btn {
      width: 602rpx;
      height: 88rpx;
      background: #00c1b9;
      border-radius: 48rpx;
      text-align: center;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 88rpx;
      margin-top: 40rpx;
    }
    .surrender {
      font-size: 28rpx;
      color: #aaaaaa;
      margin-top: 50rpx;
    }
  }
}
</style>
